<template>
  <el-table
    :data="
      tableData.filter(
        (data) =>
          !search || data.name.toLowerCase().includes(search.toLowerCase())
      )
    "
    style="width: 100%"
  >
    <el-table-column align="center" label="图片">
      <template #default="scope">
        <el-image
          style="width: 80px; height: 80px"
          :src="src + scope.row.photo1"
        ></el-image>
      </template>
    </el-table-column>
    <el-table-column align="center" label="商品名称" prop="name" />
    <el-table-column align="center" label="库存">
      <template #default="scope">
        <el-tag :type="scope.row.inventory > 0 ? 'success' : 'danger'">
          {{ scope.row.inventory }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" label="价格" prop="price" />
    <el-table-column align="center" label="分类" prop="classify_id" />
    <el-table-column align="center" label="状态">
      <template #default="scope">
        {{ scope.row.state == 0 ? "已下架" : "已上架" }}
      </template>
    </el-table-column>
    <el-table-column align="center">
      <template #header>
        <el-input
          v-model="search"
          size="mini"
          :suffix-icon="Search"
          placeholder="输入商品名称搜索商品"
        />
      </template>
      <template #default="scope">
        <el-button
          size="mini"
          type="success"
          @click="(centerDialogVisible = true), handleEdit(scope.row)"
        >
          上架
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 上架模态框 -->
  <el-dialog v-model="centerDialogVisible" title="商品上架" width="30%" center>
    <el-text align="center">是否该上架商品</el-text>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="goodsOut(), (centerDialogVisible = false)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { goodsShelfApi, goodsOutApi } from "@/api/goods";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import {
  defineComponent,
  reactive,
  onBeforeMount,
  ref,
  toRefs,
  watch,
} from "vue";
export default defineComponent({
  props: {
    sum: String,
  },
  setup(props) {
    const src = ref("/avatars/");
    const search = ref("");
    const { sum } = toRefs(props);
    // 获取下架商品信息
    let tableData = ref([]); // ref方法;声明初始值为空
    onBeforeMount(() => {
      goodsShelfApi().then((res) => {
        tableData.value.push(...res.data.query.goods_shelf); // 解构赋值到tableData中渲染表单
      });
    });
    // 声明变量用来接收对应商品
    const data = reactive({ goods_id: "", state: "" });
    // 获取对应商品的数据并赋值
    const handleEdit = (row) => {
      data.goods_id = row.id;
      data.state = row.state;
    };
    // 上架商品操作
    const goodsOut = () => {
      goodsOutApi(data).then(() => {
        // ref需要.value获取
        tableData.value = tableData.value.filter((item) => {
          return item.id !== data.goods_id;
        });
        ElMessage({
          message: "商品上架成功.",
          type: "success",
        });
      });
    };
    watch(sum, () => {
      goodsShelfApi().then((res) => {
        tableData.value = res.data.query.goods_shelf; // 解构赋值到tableData中渲染表单
      });
    });
    return {
      tableData,
      handleEdit,
      goodsOut,
      centerDialogVisible: ref(false),
      Search,
      search,
      src,
    };
  },
});
</script>
